<style type="text/css">
    .ingredientSel{
        width: 100%;
        list-style:none;
        overflow: hidden;
        white-space: nowrap;
        padding-left: 0px;
        padding-right: 0px;
    }
    .ingredientSel li{
        font-size: 14px;
        font-weight: bold;
        background: none;
        padding: 30px;
        background:ghostwhite;
        position: relative;
        border: none;
        margin-left:2px;
        display: inline;
    }
</style>
<script>
    function addPurchaseItem(id, name, gprice,count) {
        if($(".datatr[ingId="+id+"]").length>0){
            return;
        }
        var template = "<tr class='datatr' ingId='"
                + id
                + "' ingname='"
                + name
                + "'> "
                + " <td>"
                + name
                + "</td>"
                + " <td><input type='number' style='width:50px' value='"+(count!=null?count:1)+"' class='sl banSty'/></td>"
                + " <td style='cursor:pointer' onclick='changeVal(this)' class='dj banSty'>"
                + gprice
                + "</td>"
                + " <td class='zj'>0.00</td>"
                + " <td class='viewSty'><i class='fa fa-minus-circle'  style='cursor:pointer;' onclick='removePurchaseItem(\""
                + id + "\")'></i></td>" + " </tr>";
        var qobje = $(template);
        $("#cart").find(".counttr").before(qobje)
        priceSyn(qobje);
    }

    function priceSyn(obj) {
        var p = /^[1-9](\d+(\.\d{1,4})?)?$/;
        var p1 = /^[0-9](\.\d{1,4})?$/;
        var reg = /^[0-9]*[1-9][0-9]*$/;
        var dj = obj.find(".dj").html();
        var sl = obj.find(".sl").val();
        sl = reg.test(sl) ||sl==""? sl : 1;
        sl = sl <= 0&&sl!=""? 1 : sl;
        dj = (p1.test(dj) || p.test(dj)) ? dj : 0;
        zj = (dj * sl).toFixed(2);
        obj.find(".sl").val(sl);
        obj.find(".dj").val(dj);
        obj.find(".zj").html(zj);
        countTotal();
    }

    function countTotal() {
        var count = 0;
        $(".zj").each(function() {
            count += parseFloat($(this).html());
        });
        $("#totalcount").html(count.toFixed(2));
    }

    function removePurchaseItem(id) {
        $(".grid-item[ingid='" + id + "']").removeClass("f_in_sel");
        $(".grid-item[ingid='" + id + "']").addClass("f_in");
        $("#cart").find("tr[ingid='" + id + "']").remove();
        countTotal();
    }
    function changeVal(obj) {
        var cval = prompt("请输入单价", $(obj).html());
        if (cval != null) {
            $(obj).html(cval);
            priceSyn($(obj).parent());
        } else {
        }
    }




</script>
<div class="container-fluid" ng-controller="purchaseList" style="position:relative">
    <% include public/modal %>
    <!-- Page Heading -->
    <div class="row">
        <div class="col-lg-12">
            <ol class="breadcrumb" style="position:relative;margin-top:5px;margin-bottom:20px;">
                <li>
                    <i class="fa fa-cube"></i> 进货管理
                </li>
                <li class="active">进货明细
                </li>


                <div style="position:absolute;right:2%;top:23%;cursor:pointer;">
                    <i class="fa fa-plus-circle fa-lg" ng-click="mdfFun()"></i>
                </div>

            </ol>
            <% include public/tableTool %>

            <div class="pull-right">
                <% include public/searchBox %>
            </div>


        </div>
    </div>
    <div class="row" style="margin-top:10px;">
        <div class="col-lg-12">
            <div class="table-responsive" style="font-weight:bold;">总支出:&nbsp;<span style="color: red">￥{{totalPrice}}</span></div>
            <div class="table-responsive">
                <table class="table table-hover table-striped">
                    <thead>
                    <tr>
                        <th style="width:10%"><input type="checkbox" class="mini" id="selectAll"/></th>
                        <th >时间</th>
                        <th>支出</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="content in data" class="datalist"  style="cursor: pointer;">
                        <td><input type="checkbox" name="listItem" class="mini" value="{{content._id}}" ng-click="getNewIds($event)"/></td>

                        <td>{{content.time|date:'yyyy-MM-dd hh:mm:ss' }}<br/><span style="font-weight: bold;color:green;">{{content.name}}</span>
                        </td>
                        <td style="color:red;font-weight:bold;"> ￥{{content.price}}</td>
                        <td>
                            <i class="fa fa-edit"
                               ng-click="mdfFun(content._id)"
                               style="cursor:pointer;"></i>&nbsp;
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <% include public/tableFooter %>
        </div>
    </div>

    <!--提示确认模态窗口-->
    <div class="modal fade bs-example-modal-sm" id="mdfDiv" style="background-color: #ebebeb">
        <div class="modal-dialog modal-sm" style="width:100%">
            <form method="post" ng-submit="processForm(true)" name="myForm">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <form role="form">
                                <div class="form-group">
                                    <label>进货主题</label>
                                    <input class="form-control banSty" name="purchaseName" id="purchaseName" ng-minlength="5" ng-maxlength="50" ng-model="formData.name" required autocomplete="off" >
                                </div>
                                <div class="form-group">
                                    <label>进货时间</label>
                                    <div class="input-group date form_date_ex" data-date="" >
                                        <input class="form-control" size="16" type="text"   readonly id="purchaseDate" ng-model="formData.time" >
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="viewSty">进货列表</label>
                                    <div class="field" class="viewSty">
                                        <input type="text" class="form-control viewSty" name="nope" id="nope" placeholder="输入拼音缩写选择材料进行添加"  />
                                    </div>
                                    <script src="/javascripts/jquery.autocompleter.js"></script>
                                    <div>
                                        <table class="table table-hover" id="cart" >
                                            <thead>
                                            <tr>
                                                <th width="20%">名称</th>
                                                <th width="20%">数量(斤)</th>
                                                <th width="20%">单价</th>
                                                <th width="20%">总价</th>
                                                <th width="20%"> </th>
                                            </tr>

                                            <tr class="counttr">
                                                <td style="font-weight:bold;">总计：</td><td colspan="2" ></td>
                                                <td id="totalcount">0</td><td></td>

                                            </tr>
                                            </thead>
                                        </table>
                                    </div>

                                </div>

                                <div align="right">
                                    <button type="submit" class="btn btn-default viewSty">保存</button>
                                    <button type="button" class="btn btn-default"  data-dismiss="modal">返回</button>
                                </div>
                            </form>
                        </div>

                    </div>
                    <!-- /.row (nested) -->
                </div>
            </form>
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


</div>
<script>
    $('.form_date_ex').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0
    });



</script>



